<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%String basePath = request.getContextPath(); %>
<script type="text/javascript" src="<%=basePath %>/resource/js/ajax_constants.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/resource/js/jquery/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	loadPosition();
	$("#addPositionButton").click(doAddPosition);
	$("#modifyButton").click(doModifyPosition);
	$("#cancelModifyButton").click(hiddenModifyPositionBox);
	$("#hiddenPositionButton").click(hiddenAddPosition);
});

function loadPosition() {
	$.ajax({ 
		url: "<%= basePath%>/position/getPositions",
		type: 'post',
		dataType: 'json',
		success: function(res) {
			if(res.result == AjaxMsgConstants.SUCCESS){
				createOptionTable(res.positions);
			}
		}
	});
}

function createOptionTable(positionList) {
	var positionHtml = '';
	$.each(positionList, function(i, position){
		positionHtml += '<div style="width: 780px; height: 40px; line-height: 40px; margin: 5px; border-bottom: 1px solid #AED4F5;">'+
							'<div style="width: 300px; height: 40px; float: left;">'+position.positionName+'</div>' +
							'<div style="width: 200px; height: 40px; float: left;">' +
								'<div style="float: left; width: 100px; height: 40px;"><a href="javascript:" onclick="showModifyBox(this, \''+position.positionId+'\')">修改</a></div>' +
								'<div style="float: left; width: 100px; height: 40px;"><a href="javascript:deletePosition(\''+position.positionId+'\')">删除</a></div>' +
								'<div style="clear: both;"></div>' +
							'</div>' +
							'<div style="clear: both;"></div>'+
						'</div>';
	});
	$("#position-list").html(positionHtml);
}

/*
 * 提交添加position的信息
 */
function doAddPosition() {
	var positionName = $("#positionName").val();
	if (positionName != null && "" != positionName) {
		disableButton("addPositionButton");
		$.ajax({
			type: 'post',
			url: "<%= basePath%>/position/admin/addPosition",
			dataType: 'json',
			data: {'positionName': positionName},
			success: function(res) {
				if(res.result == AjaxMsgConstants.SUCCESS){
					hiddenAddPosition();
					alert("添加成功!!!");
				} else {
					alert("添加失败!!!");
				}
				enableButton("addPositionButton");
			}
		});
	} else {
		alert("请先填写小区名");
	}
}

/*
 * 提交修改小区的信息
 */
function doModifyPosition() {
	var newPositionName = $("#new-positionName").val();
	var positionId = $("#positionid-box").val();
	if (newPositionName != null && newPositionName != "" && positionId != null && positionId != "") {
		disableButton("modifyButton");
		 // 提交修改数据
		$.ajax({
			type: "post",
			url: "<%= basePath%>/position/admin/modifyPosition",
			dataType: "json",
			data: {"positionId": positionId, "positionName": newPositionName},
			success: function(res) {
				if (res.result == AjaxMsgConstants.SUCCESS) {
					hiddenModifyPositionBox();
					alert("修改成功!!!");
				} else {
					alert("修改失败!!!");
				}
				enableButton("modifyButton");
			}
		});
	} else {
		alert("请先完善数据!!!");
	}
}

/**
 * 提交删除position的信息
 */
function deletePosition(positionId) {
	if (positionId != null && "" != positionId) {
		$.ajax({
			type: 'post',
			url: "<%= basePath%>/position/admin/deletePosition",
			data: {"positionId": positionId},
			dataType: 'json',
			success: function(res) {
				if(res.result == AjaxMsgConstants.SUCCESS) {
					alert("删除成功");
				} else {
					alert("删除失败");
				}
			}
		});
	}
}

function showModifyBox(clickObj, positionId) {
	if (positionId != null) {
		var top = $(clickObj).offset().top + $(clickObj).height();
		var left = $(clickObj).offset().left - 50;
		$("#modify-box").css({'display': 'block', 'top': top, 'left': left});
		$("#positionid-box").val(positionId);
	}
}

function hiddenModifyPositionBox() {
	$("#modify-box").css({'display': 'none'});
}

function disableButton(buttonId) {
	buttonId = "#" + buttonId;
	$(buttonId).attr("disabled", true);
}

function enableButton(buttonId) {
	buttonId = "#" + buttonId;
	$(buttonId).attr("disabled", false);
}

function showAddPosition() {
	$("#addposition-box").css({"display": "block"});
}

function hiddenAddPosition() {
	$("#addposition-box").css({"display": "none"});
}
</script>    
<div style="width: 800px; height: 580px;">
	<div style="width: 800px; height: 80px; text-align: center;">
		<a href="javascript:showAddPosition()">添加小区</a>
		<div style="display: none; width: 800px; height: 50px; line-height: 50px;" id="addposition-box">
		<div style="float: left; width: 300px; height: 50px; margin-left: 50px;">请输入小区名:<input type="text" name="positionName" id="positionName" /></div>
		<div style="float: left; width: 160px; height: 50px; margin-left: 20px;">
			<input style="width: 80px; height: 40px; margin: 5px;" type="button" id="addPositionButton" value="确定添加">
			<input style="width: 40px; height: 40px; margin: 5px;" type="button" id="hiddenPositionButton" value="取消">
		</div>
		<div style="clear: both;"></div>
		</div>
	</div>
	<div style="width: 800px; height: 40px; line-height: 40px; text-align: center;"><h3>小区列表及管理</h3></div>
	<div class="positionMeun" style="width: 780px; height: 40px; margin: 5px; line-height: 40px; border-bottom: 1px solid #AED4F5;">
		<div style="width: 300px; height: 40px; float: left;">小区名</div>
		<div style="width: 200px; height: 40px; float: left;">操作</div>
		<div style="clear: both;"></div>
	</div>
	<div id="position-list">
		
	</div>
	<div id="modify-box" style="display: none; position: absolute; width: 500px; height: 40px; line-height: 40px; background: #AED4F5;">
		<div style="float:left; width: 300px; height: 40px; margin-left: 20px;">新小区名&nbsp;:&nbsp;
			<input style="width: 150px;" type="text" name="newPositionName" id="new-positionName"/>
			<input type="hidden" id="positionid-box" />
		</div>
		<div style="float:left; width: 150px; height: 40px; margin-left: 20px;">
			<input type="button" id="modifyButton" value="确认修改" style="height: 30px; margin: 5px; width: 80px;" />
			<input type="button" id="cancelModifyButton" value="取消" style="height: 30px; margin: 5px; width: 40px;" />
		</div>
		<div style="clear: both;"></div>
	</div>
</div>